<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css?v=100" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201219"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>


    <style type="text/css">
        #app {
            height: 100%;
        }

        #app > .header {
            height: 48px;
            line-height: 48px;
            background-color: rgba(41, 49, 82, 0.8);
        }

        #app > .header .el-form {
            margin-left: 10px;
            float: left;
            height: 48px;
        }

        #app > .header .el-form-item {
            margin-bottom: 0;
            line-height: 48px;
        }

        #app > .header .el-checkbox {
            color: rgba(255, 255, 255, 0.8);
            margin-left: 10px;
        }

        #app > .header .el-switch {
            float: right;
            margin-top: 12px;
            margin-right: 10px;
        }

        #app > .record_content {
            height: calc(100% - 48px);
            margin: 0px;
            padding: 0px;
            clear: both;
        }

        #app > .record_content > .left {
            float: left;
            width: 250px;
            height: 100%;
            background-color: rgb(58, 65, 95);
        }

        #app > .record_content > .left > .header {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: rgb(255, 255, 255);
            padding-left: 20px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
        }

        #app > .record_content > .left > .header i {
            height: 20px;
            width: 5px;
            background-color: rgb(252, 192, 86);
            display: block;
            float: left;
            margin-right: 10px;
            margin-top: 5px;
        }

        #app > .record_content > .left .el-tree {
            background-color: transparent;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 10px;
        }

        #app > .record_content > .right {
            float: right;
            width: calc(100% - 250px);
            height: 100%;
        }

        .el-form-item__label {
            color: rgba(255, 255, 255, 0.8) !important;
            padding: 0;
        }

        .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
            line-height: 48px;
        }

        .clinBrain-folder {
            color: rgb(252, 192, 86);
            margin-right: 5px;
        }

        .clinBrain-empty {
            color: #9bca63;
            margin-right: 5px;
        }

        .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .el-icon-caret-right:before {
            padding: 0px;
            content: "\E603";
        }

        .el-icon-caret-right:before {
            padding: 0px;
            content: "\E604";
        }

        .clinbrain-time-axis > .right {
            float: left;
            width: calc(100% - 150px);
        }

        .clinbrain-time-axis .el-scrollbar {
            float: left;
            width: 100%;
            margin-top: 20px;
        }

        .header-title {
            float: right;
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 20px;
        }
    </style>

</head>
<body>

<div id="app" v-cloak v-loading.fullscreen.lock="loading" element-loading-text="正在加载数据..."
     element-loading-background="transparent">
    <div class="header">
        <el-form size="mini" :inline="true">
            <el-form-item label="日期：">
                <el-date-picker type="daterange" v-model="requestModel.dates"
                                range-separator="~"
                                start-placeholder=""
                                value-format="yyyy-MM-dd"
                                end-placeholder="">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="诊断：">
                <el-input v-model="requestModel.Content" size="mini" style="width:150px;"></el-input>
            </el-form-item>
            <el-checkbox v-model="requestModel.outpatientDepartment">门诊</el-checkbox>
            <el-form-item>
                <el-checkbox v-model="requestModel.hospitalization">住院</el-checkbox>
            </el-form-item>
            <el-form-item>
                <i class="el-icon-search clinbrain-i-search" style="margin-top:18px;" v-on:click="search"></i>
            </el-form-item>
        </el-form>
        <el-switch active-text=""
                   v-model="activeTab" active-value="1" inactive-value="2"
                   inactive-text="时间轴">
        </el-switch>
    </div>
    <div class="record_content">
        <div v-show="activeTab==1" class="left" :style="leftStyle">
            <div class="header">
                <span>{{JZTitleFullName}}</span>
                <span class="iconfont clinBrain-menu" :title="TitleMsg"
                      style="cursor:pointer;float:right;margin-right:10px;" v-on:click="onMenuClick"></span>
            </div>
            <div class="scrollbar-tree">
                <el-tree :data="treeData" node-key="id"
                         :current-node-key="currentNodeKey"
                         auto-expand-parent="true"
                         :default-expanded-keys="defaultExpandedKeys"
                         :props="defaultProps"
                         highlight-current="true"
                         ref="elTree"
                         @node-click="nodeClick"
                         :default-expand-all="false"
                         :render-content="renderContent"></el-tree>
            </div>
        </div>
        <div v-if="activeTab==1" id="rightapp" class="right" style="overflow:hidden">
            <iframe :src="url" style="width:100%;height:100%; margin:0px; padding:0px; border:none; display:block;"
                    frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="clinbrain-time-axis" v-if="activeTab==2">
            <div class="left">
                <ul class="yearList">
                    <li v-on:click="onYearClick(item)" :class="item.name==selectedYear?'is-active':''"
                        v-for="(item,index) in yearList">{{item.name}}
                    </li>
                </ul>
            </div>
            <div class="right">
                <div v-on:scroll="onScroll" class="el-scrollbar">
                    <div class="header-title">
                        <div class="menzhen">
                            <div class="menzhentwo"></div>
                            <span>门诊</span></div>
                        <div class="zhuyuan">
                            <div class="zhuyuantwo"></div>
                            <span>住院</span></div>
                    </div>
                    <div class="time-axis-container">
                        <div :id="index" v-for="(item,index) in timeAxisData" :class="getTimeAxisClass(item,index)">
                            <div class="line">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="join"></div>
                            <div class="content">
                                <div class="main">
                                    <div><span>科室：{{item.data.department}}</span>&nbsp;<span>医生：{{item.data.dxDoctorName}}</span>
                                    </div>
                                    <div>诊断：{{item.data.hosDxName}}</div>

                                </div>
                                <div class="circular">
                                    <div>{{ModifyConfig.DateToDate(item.data.dxDate)|formatDate('yyyy')}}</div>
                                    <div>{{ModifyConfig.DateToDate(item.data.dxDate)|formatDate('MM-dd')}}</div>
                                </div>
                                <div class="jiaodu">
                                    <span v-on:click="patientDetail(null,item)">{{item.data.opOrIp}}详情</span><span
                                        v-on:click="patientDetail(citem,item.data)"
                                        v-for="(citem,cindex) in item.data.children" :class="citem.imgClass"
                                        style="cursor:pointer"><a>{{citem.shortName}}</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="activeTab==3" class="clinbrain-time-axis">
            <el-scrollbar>
                <div class="clinbrain-time-axis-totip">
                    <div></div>
                    <div></div>
                    <div>
                        <span class="background-blue"></span>
                        <span>门诊</span>
                        <span class="background-orange"></span>
                        <span>住院</span>
                    </div>
                </div>
                <div v-for="(item,index) in timeAxisData" class="clinbrain-time-axis-item">
                    <div class="clinbrain-time-axis-content">
                        <div v-if="index%2==1" class="right">
                            <div><span>{{ModifyConfig.DateToDate(item.data.dxDate)|formatDate}}</span><span>{{item.data.dxDoctorName}}</span><span>{{item.data.department}}</span>
                            </div>
                            <div>诊断：{{item.data.hosDxName}}</div>
                            <div><span v-on:click="patientDetail(citem)"
                                       v-for="(citem,cindex) in item.data.children"
                                       :class="citem.number>0?'active':''"><a :class="citem.imgClass">{{citem.shortName}}</a></span>
                            </div>
                        </div>
                    </div>
                    <div class="clinbrain-time-axis-axis-container">
                        <div></div>
                        <!--水滴-->
                        <div class="center">
                            <div :class="item.data.opOrIP=='门诊'?'droplet background-blue':'droplet background-orange'">
                                <div class="circular border-white"></div>
                            </div>
                        </div>
                        <div></div>
                    </div>
                    <div class="clinbrain-time-axis-content">
                        <div v-if="index%2==0" class="left">
                            <div><span>{{ModifyConfig.DateToDate(item.data.dxDate)|formatDate}}</span><span>{{item.data.dxDoctorName}}</span><span>{{item.data.department}}</span>
                            </div>
                            <div>诊断：{{item.data.hosDxName}}</div>
                            <div><span v-on:click="patientDetail(citem)"
                                       v-for="(citem,cindex) in item.data.children"
                                       :class="citem.number>0?'active':''"><a :class="citem.imgClass">{{citem.shortName}}</a></span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                url: "",
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                mode: 1,
                loading: false,
                currentNodeKey: "",
                defaultExpandedKeys: [],
                requestModel: {
                    dates: [],
                    hospitalization: true,
                    outpatientDepartment: true,
                    Content: ""
                },
                activeTab: 2,
                timeAxisData: [],
                yearList: [],//年列表
                selectedYear: '',
                JZTitleFullName: "就诊记录列表",
                leftStyle: {width: '250px'},
                TitleMsg: "收缩",
                menuCollapse: false
            };
        },
        methods: {
            /**
             * 获取查询条件起始时间
             * index 下标
             */
            getDate(index) {
                if (this.requestModel.dates && this.requestModel.dates.length >= index + 1) {
                    return this.requestModel.dates[index];
                }
                return null;
            },
            /**
             *获取时间轴样式
             *item 时间轴数据
             * index 下标
             */
            getTimeAxisClass(item, index) {
                var className = index % 2 == 0 ? "left " : "right ";
                className += item.data.opOrIp == "门诊" ? "time-axis-op" : "time-axis-ip";
                return className;
            },

            /**
             *滚动条事件
             * x 滚动条X轴滚动距离
             * y 滚动条Y轴滚动距离
             * left x轴滚动内容距离
             * top y轴滚动内容距离
             * width 滚动控件容器宽度
             * height 滚动控件容器高度
             */
            scrollBar(x, y, left, top, width, height) {

            },
            patientDetail(citem, pdata) {
                if (!pdata) return false;
                window.open("/cdr/VisitRecord/daindex?patientId=" + clinBrain.getParam("patientId") + '&oporIp=' + clinBrain.getParam("oporIp") + "&visitNumber=" + (citem ? pdata.VisitNumber : pdata.data.VisitNumber) + (citem ? "&indx=" + citem.Indx : ""));
            },
            renderContent(h, {node, data, store}) {
                var className = node.parent && node.parent.parent && node.parent.parent.parent ? "iconfont clinBrain-empty" : "iconfont clinBrain-folder"
                var title = data.data && data.data.dxDoctorName ? "{label} {Doctor} {Dep}".format({
                    Doctor: data.data.dxDoctorName,
                    Dep: data.data.department,
                    label: data.label
                }) : null
                if (title == null)
                    title = data.label;
                return h("span", {attrs: {title: title}}, [h("i", {class: className}), h("span", data.data && data.data.dxDoctorName ? title : data.label)])
            },
            //获取树数据
            search() {
                var _this = this;
                var param = {
                    Content: this.requestModel.Content,
                    BeginDate: this.getDate(0),
                    EndDate: this.getDate(1),
                    MedicalType: [],
                    visitNumber: clinBrain.getParam("visitNumber"),
                    opOrIp: clinBrain.getParam("opOrIp"),
                    patientId: clinBrain.getParam("patientId")
                };
                //住院
                if (this.requestModel.hospitalization) {
                    param.MedicalType.push(2);
                }
                //门诊
                if (this.requestModel.outpatientDepartment) {
                    param.MedicalType.push(1);
                }
                var _this = this;
                this.loading = true;
                this.currentNodeKey = null;
                this.timeAxisData = [];
                this.yearList = [];
                clinBrain.request({
                    url: "/cdr/visit/index",
                    params: param,
                    loading: true,
                    loadingText: "正在查询数据",
                    success: function (resp) {
                        _this.loading = false;
                        resp.data = resp.data.Data;
                        _this.treeData = resp.data;
                        if (resp.data.length == 0) {
                            _this.error("未查询到此患者信息！");
                            // _this.url = "/cdr/visitrecord/default/";
                            return;
                        }
                        _this.selectedYear = resp.data[0].label;
                        if (resp.data && resp.data.length > 0) {
                            resp.data.forEach(function (model) {
                                if (model.children && model.children.length > 0) {
                                    model.children.forEach(function (i) {
                                        _this.timeAxisData.push(i);
                                        var year = new Date(i.data.dxDate).format("yyyy");
                                        var isExists = false;
                                        _this.yearList.forEach(function (m) {
                                            if (m.name == year) isExists = true;
                                        });
                                        if (!isExists) _this.yearList.push({
                                            name: year,
                                            value: _this.timeAxisData.length - 1,
                                            top: (_this.timeAxisData.length - 1) * 120
                                        });
                                    });
                                }
                            });
                        }

                        var currentNodeData = {};
                        _this.treeData.forEach(function (i) {
                            if (i.children && !_this.currentNodeKey) {
                                i.children.forEach(function (m) {
                                    if (m.children && !_this.currentNodeKey) {
                                        m.children.forEach(function (j) {
                                            if (!_this.currentNodeKey) {
                                                _this.currentNodeKey = j.id
                                                currentNodeData = j;
                                            }
                                        })
                                    }
                                })
                            }
                        })
                        //找不到数据展开第一个
                        if (!_this.currentNodeKey) {
                            _this.treeData.forEach(function (i) {
                                if (i.children && !_this.currentNodeKey) {
                                    i.children.forEach(function (m) {
                                        if (m.children && !_this.currentNodeKey) {
                                            if (!_this.currentNodeKey) {
                                                _this.currentNodeKey = m.id
                                            }
                                        }
                                    })
                                }
                            })
                        }
                        _this.$nextTick(function () {
                            _this.$refs.elTree.setCurrentKey(_this.currentNodeKey);
                        });
                        _this.defaultExpandedKeys.push(_this.currentNodeKey);
                        _this.nodeClick(currentNodeData)
                    }
                }, this);
            },
            //节点单击
            nodeClick(item) {
                if (item.url) {
                    var param = {
                        url: item.url,
                        patientId: clinBrain.getParam('patientId'),
                        visitNumber: item.visitNumber,
                        opOrIp: clinBrain.getParam('opOrIp')
                    }
                    this.url = item.url + "?patientId={patientId}&visitNumber={visitNumber}&opOrIp={opOrIp}".format(param);
                }
            },
            //模式选择
            modeClick(index) {
                this.mode = index;
            },
            //点击年事件
            onYearClick(item) {
                this.selectedYear = item.name;
                var url = '/cdr/visitrecord/?patientId=' + clinBrain.getParam('patientId') + '&visitNumber=' + clinBrain.getParam('visitNumber') + '&oporIp=' + clinBrain.getParam("oporIp");

                window.location.href = url + '#' + item.value
            },
            /**
             *滚动条滚动事件
             */
            onScroll(e) {
                var _this = this;
                var value = "";
                for (var i = 0; i < _this.yearList.length; i++) {
                    value = _this.yearList[i].name;
                    if (_this.yearList[i].top > (e.target.clientHeight / 2) + e.target.scrollTop) {
                        value = _this.yearList[i - 1].name;
                        break;
                    }
                }
                this.selectedYear = value;
            },
            onMenuClick: function () {
                this.menuCollapse = !this.menuCollapse
                this.leftStyle.width = this.menuCollapse ? '100px' : '250px';
                this.TitleMsg = this.menuCollapse ? '展开' : '收缩';
                this.JZTitleFullName = this.menuCollapse ? '就诊..' : '就诊记录列表';
                document.getElementById("rightapp").style.width = this.menuCollapse ? 'calc(100% - 100px)' : 'calc(100% - 250px)'
            },
        },
        created: function () {
            this.search();
        },
        filters: {
            /**
             *日期格式化
             */
            formatDate(val, format) {
                if (!format) format = "yyyy-MM-dd";
                return new Date(val).format(format);
            }
        }
    });
</script>
</html>


